<template>
	<div class="container">
	  <div class="header">
		<router-link to="">
		  <i class="iconfont icon-back" @click="$router.back()"></i>
		</router-link>
		<p>收货地址</p>
	  </div>
	  <div class="content">
		<ul>
		  <li v-for="item in $store.state.address.list" :key="item.id" :class="{ default: item.isDefault === 1 }">
			<p class="address-one">
			  <span>{{ item.receiveName }}</span>
			  <span>{{ item.receivePhone }}</span>
			</p>
			<p class="title">
			  {{ item.receiveRegion }}-{{ item.receiveDetail }}
			</p>
			<br>
			<button class="btn2"><i class="iconfont icon-remove" @click="remove(item.id)">删除</i></button>
			<button class="btn3"><i class="iconfont icon-edit" @click="beginUpdate(item)">编辑</i></button>
			<span class="box" v-if="item.isDefault === 1">默认地址</span>
			<button v-else @click="setDefault(item.id)">设为默认</button>
		  </li>
		</ul>
		<button class="btn" @click="beginAdd">+新增地址</button>
	  </div>
	  <AddressEdit ref="edit" address="" v-show="isEdit" @close="isEdit = false" @save="save">
	  </AddressEdit>
	</div>
  </template>
  
  <script>
  import AddressEdit from "@/views/Address/AddressEdit";
  export default {
	name: "address",
	components: { AddressEdit },
	data() {
	  return {
		isEdit: false,
		editModel: null
	  }
	},
	methods: {
	  async setDefault(id) {
		try {
		  await this.$store.dispatch('address/setDefault', id);
		  this.$miNotice("默认地址设置成功")
		} catch (e) {/**/
		}
	  },
	  async remove(id) {
		//发ajax
		try {
		  await this.$miConfirm("真删?")
		  await this.$store.dispatch('address/remove', id)
		  this.$miNotice("删除成功");
		} catch (e) {/**/
		}
	  },
	  beginAdd() {
		this.$refs.edit.beginEdit({
		  id: 0,
		  receiveName: "",
		  receivePhone: "",
		  receiveRegion: "",
		  receiveDetail: "",
		  isDefault: 0
		})
		this.isEdit = true
	  },
	  beginUpdate(address) {
		this.$refs.edit.beginEdit(address)
		this.isEdit = true
	  },
	  async save(address) {
		try {
		  await this.$store.dispatch(address.id === 0 ? 'address/add' : 'address/update', address);
		  this.$miNotice(address.id === 0 ? '新增成功...' : '修改成功...')
		  this.isEdit = false
		} catch (e) {/**/
		}
	  }
	},
	async created() {
	  try {
		await this.$store.dispatch('address/init')
	  } catch (e) {/**/
	  }
  
	},
  }
  </script>
  
  <style scoped>
  .container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fff;
  }
  
  .header {
	flex-shrink: 0;
	height: 45px;
	display: flex;
	align-items: center;
  }
  
  .header p {
	font-size: 18px;
	margin-left: 146px;
	color: rgba(0, 0, 0, 0.8);
  }
  
  .content ul li {
	padding: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  }
  
  .address-one {
	display: flex;
	justify-content: space-between;
  }
  
  .box {
	font-size: 12px;
	padding: 2px;
	color: #b60909;
	border: 1px solid #b60909;
  }
  
  .title {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.4);
	margin-top: 10px;
	margin-left: 10px;
  }
  
  .btn {
	align-items: center;
	background-color: rgb(255, 255, 255);
	border-color: rgb(132, 95, 63);
	border-radius: 5.66667px;
	border-width: 1px;
	height: 48.6667px;
	justify-content: center;
	margin: 16.6667px;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	width: 383px;
	color: rgb(132, 95, 63);
  }
  .btn2{
	background-color: #fff;
	border: 0px;
	font-size: 16px;
	color: #000;
  }
  .btn3{
	background-color: #fff;
	border: 0px;
	font-size: 16px;
	color: #000;
  }
  </style>